import React from "react";

/**
* 
* @param type 类型：'list' | 'detail' list: 列表, detail: 详情
* @param parameter 替换数据：如传入数据为{ {nowTime}: '2023-05-21 16:24' }，使用时直取即可(parameter['{nowTime}']) 
* @param record 当前消息记录数据
* @param emit 扩展代码：事件挂载对象
* @param callBackEvents 扩展代码：回调事件挂载对象
* @returns {JSX.Element}
* @constructor
*/
function MessageNo7({ parameter = {}, record = {}, emit = undefined, callBackEvents = undefined, type = 'list' } = {},) {

    const onButtonClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        alert('点击了按钮');
    }

    if (type == 'list') {
        return (
            <div style={{
                padding: 16,
                display: 'flex',
                alignItems: 'center',
            }}>
                <img
                    src="/ImageType/GetUserAvatar?token=000097e2d3dbe2444fbb8b81f6528cf36adc&userId=128&flag=1687851427250"
                    alt=""
                    style={{
                        width: 48,
                        height: 48,
                        marginRight: 12,
                        borderRadius: 24,
                        overflow: 'hidden',
                    }}
                />
                <div style={{ width: 'calc(100% - 60px)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ fontSize: 16, lineHeight: '24px', color: 'rgb(51,51,51)' }}>
                            这是您的消息标题
                        </div>
                        <div style={{ fontSize: 12, color: 'rgb(153,153,153)' }}>
                            {parameter['{nowTime}']}
                        </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{
                            flex: 1,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            wordBreak: 'break-all',
                            fontSize: 14,
                            lineHeight: '22px',
                            color: 'rgb(153,153,153)',
                        }}>
                            这是您定义的消息内容...
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <div style={{ color: 'var(--inbiz-color-primary)', fontSize: 14 }} onClick={onButtonClick}>
                                这是按钮
                            </div>
                            <div style={{ marginLeft: record?.MsgRead === false ? 6 : 0 }}>
                                {record?.MsgRead === false && <div style={{ width: 8, height: 8, background: 'rgb(234, 77, 62)', borderRadius: 4 }} />}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    } else if (type == 'detail') {
        return (
            <div style={{ height: 'calc(100% - 45px)', overflowY: 'auto', padding: 16 }}>
                <div style={{ fontSize: 22, color: 'rgb(51,51,51)', lineHeight: '30px' }}>这是您的消息标题</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgb(245,245,245)', padding: '12px 0' }}>
                    <div style={{ fontSize: 12, color: 'rgb(102,102,102)' }}>这是分组名称</div>
                    <div style={{ fontSize: 12, color: 'rgb(153,153,153)' }}>{parameter['{nowTime}']}</div>
                </div>
                <div style={{ fontSize: 14, color: 'rgb(51,51,51)', lineHeight: '21px', marginTop: 12, textIndent: 28 }}>这是您定义的消息内容，这是您定义的消息内容，这是您定义的消息内容，这是您定义的消息内容，这是您定义的消息内容，这是您定义的消息内容。</div>
            </div>
        )
    } else {
        return null
    }
}

MessageNo7.tmplName = '消息模板No.7';

export default MessageNo7